<template>
  <div class="login">
    <div class="header">
      <van-icon
        name="arrow-left"
        color="#000"
        size="28"
        @click="$router.back()"
      />
    </div>
    <div class="title">
      <h3>登录</h3>
    </div>
    <div class="center">
      <div class="region">
        <p>中国大陆 +86</p>
        <span class="iconfont icon-xiangyoujiantou"></span>
      </div>
      <input type="text" placeholder="请输入手机号" v-model="phone" />
      <input type="password" placeholder="请输入密码" v-model="password" />
    </div>
    <div class="sign" @click="submit">
      <p>登录</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { showToast } from "vant";
import { useRouter } from "vue-router";
const userinfo = ref([]);
const phone = ref("");
const password = ref("");
const router = useRouter();

function submit() {
  //1.验证手机号码
  const reg =
    /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;

  //2.验证密码
  const pass = /^\d{6,}$/; //至少6位的数字
  if (!reg.test(phone.value) || !pass.test(password.value)) {
    showToast({ message: "请输入正确的手机号与密码", position: "bottom" });
    return;
  }

  userinfo.value.push({
    userName: "Alex",
    userId: 123546,
    avatar: "../assets/avatar.jpg",
  });
  // console.log(userinfo.value);
  localStorage.setItem("userinfo", JSON.stringify(userinfo.value));

  showToast({ message: "登录成功", position: "bottom" });
  router.back();
}
</script>

<style lang="scss" scoped>
.login {
  padding: 20rem;
  position: relative;
  background: url("../assets/t6.png") no-repeat;
  background-position: bottom center;
  background-size: contain;
  height: 100vh;
  .title {
    h3 {
      font-size: 30rem;
      font-weight: bold;
      color: #000;
      margin: 50rem 0;
    }
  }
  .center {
    .region {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1rem solid #999;
      padding-bottom: 20rem;

      p {
        font-size: 16rem;
        color: #000;
        font-weight: 600;
      }
      span {
        font-size: 14rem;
        color: #666;
        font-weight: bold;
      }
    }
    input {
      padding: 20rem 0;
      width: 100%;
      border: none;
      border-bottom: 1rem solid #999;
      font-size: 14rem;
    }
    input::-webkit-input-placeholder {
      /*WebKit browsers*/
      color: #bdbdbd;
    }
  }
  .sign {
    font-size: 16rem;
    color: #fff;
    background-color: #e5e5e5;
    padding: 0rem 20rem;
    text-align: center;
    height: 35rem;
    line-height: 35rem;
    border-radius: 18rem;
    width: 80rem;
    margin-top: 30rem;
    position: absolute;
    bottom: 250rem;
    right: 20rem;
    z-index: 10;
  }
}
</style>